<script type='text/javascript' src='<?php echo $this->webroot; ?>js/plugins/jflot/jquery.flot.js'></script>    
<script type='text/javascript' src='<?php echo $this->webroot; ?>js/plugins/jflot/jquery.flot.stack.js'></script>    
<script type='text/javascript' src='<?php echo $this->webroot; ?>js/plugins/jflot/jquery.flot.pie.js'></script>
<script type='text/javascript' src='<?php echo $this->webroot; ?>js/plugins/jflot/jquery.flot.resize.js'></script>

<div class="page-header">
    <div class="icon">
        <span class="ico-chart-2"></span>
    </div>
    <h1>Ranking<small>Por ventas</small></h1>
</div>

<div class="row-fluid">

    <div class="block">
        <div class="head">
            <h2>La Paz</h2>
        </div>
        <div class="data">
            <div id="crt" style="height: 500px;"></div>
        </div>  

    </div>  

    <div class="block">
        <div class="head purple">
            <div class="icon"><span class="ico-location"></span></div>
            <h2>With hover</h2>     
            <ul class="buttons">
                <li><a href="#" onClick="source('table_hover');
                        return false;"><div class="icon"><span class="ico-info"></span></div></a></li>
            </ul>                                                          
        </div>                
        <div class="data-fluid">
            <table cellpadding="0" cellspacing="0" width="100%" class="table table-hover">
                <thead>
                    <tr>
                        <th width="25%">Nombre</th>
                        <th width="25%">Departamento</th>
                        <th width="25%">Zona</th>
                        <th width="25%">Monto Total(Bs.)</th>
                    </tr>
                </thead>
                <tbody>
                <?php $i = 0;?>
                <?php foreach($repor as $re):$i++;?>
                    <tr>
                        <td><?php echo $re['User']['nombre'];?></td>
                        <td><?php echo $re['User']['departamento_id'];?></td>
                        <td><?php echo $re['Zona']['nombre'];?></td>
                        <td><?php echo $re['User']['monto_tmp'];?></td>
                    </tr>
                <?php endforeach;?>                   
                </tbody>
            </table>
        </div>                
    </div>

</div>
<script type="text/javascript">

                    if($("#crt").length > 0){
        
        var data = [];
        	        
//	for( var i = 0; i < 5; i++)	{
//		data[i] = { label: "Series"+(i+1), data: Math.floor(Math.random()*100)+1 };
//                console.log(data[i]);                
//        }
            
            data[0] = {label: "Roger Sanchez", data: 70};
            data[1] = {label: "Juan Perez", data: 60};
            data[2] = {label: "Pepito Grillo", data: 65};
            data[3] = {label: "Maria Delagado", data: 45};
            data[4] = {label: "Jaime Aguirre", data: 30};
            data[5] = {label: "Jose Martin", data: 30};
	

        $.plot($("#crt"), data, 
	{
            series: {
                pie: { show: true }
            },
            legend: { show: false }
	});

    }
</script>
